<template>
  <div>
    <city-header></city-header>
    <city-list :hotCityList ="hotCityList" :allCityList="allCityList" :letter="letter"></city-list>
    <letter-list :allCityList="allCityList" @change="clickLetter"></letter-list>
  </div>
</template>

<script>
  import axios from 'axios'
  import CityHeader from './components/Header'
  import CityList from './components/List'
  import LetterList from './components/LetterList'
    export default {
      name: "city",
      data (){
        return{
          hotCityList:[],
          allCityList:{},
          letter:""
        }
      },
      components:{
        CityHeader,
        CityList,
        LetterList
      },methods:{
        getDataSucc (res){
          if (res.data.ret && res.data.data){
            res =res.data.data
            this.hotCityList =res.hotCities
            this.allCityList =res.cities
          }
        },
        clickLetter (e){
          this.letter =e;
        }
      },
      mounted(){
        axios.get('/api/city.json').then(this.getDataSucc)
      }
    }
</script>

<style scoped>

</style>
